<template>
  <div class="top-content" :style="scaleStyle">
    <!-- 新闻资讯 -->
    <div class="samebox">
      <div class="newsbox">
        <div class="newsbox_left">
          <el-carousel class="newsbox_left_item">
            <el-carousel-item v-for="item in swiperlist" :key="item.sort">
              <el-image :src="item.image" fit="cover" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="newsbox_right">
          <div class="newsbox_right_left pointer">
            <div
              @click="changegg(index)"
              :class="
                current == index
                  ? 'active newsbox_right_left_item'
                  : 'newsbox_right_left_item'
              "
              v-for="(item, index) in tablist"
            >
              {{ item }}
            </div>
          </div>
          <div class="newsbox_right_center">
            <div
              class="newsbox_right_center_lsit pointer"
              @click="togg(i)"
              v-for="(i, index) in randerlist"
            >
              <div v-if="index === 0" title="" class="header-new newsItem">
                <!-- <div class="left-time">
                  <strong>15</strong><br /><span>{{ i.publishTime }}</span>
                </div> -->
                <div class="right-title">
                  <p>{{ i.title }}</p>
                  <!-- <span> </span> -->
                </div>
              </div>
              <div class="newsItem" v-else>
                <span class="point"></span>
                <div class="new-title">{{ i.title }}</div>
                <span class="newTime">{{ formatDate(i.publishTime) }}</span>
              </div>
            </div>
          </div>
          <router-link to="notice" class="newsbox_right_right pointer">
            查看更多
          </router-link>
        </div>
      </div>
    </div>
    <div class="section-tab-container">
      <div class="section-tab">
        <div 
          @click="sectionTabIndex = 0" 
          :class="{ active: sectionTabIndex === 0 }"
          class="tab-item"
        >
          <h3>数据中心</h3>
          <span class="sub-title">DATA CENTER</span>
        </div>
        <div 
          @click="sectionTabIndex = 1" 
          :class="{ active: sectionTabIndex === 1 }"
          class="tab-item"
        >
          <h3>热门排行</h3>
          <span class="sub-title">TOP RANKING</span>
        </div>
      </div>
    </div>

    <div class="container-wrap dataCenter" v-show="sectionTabIndex === 0">
      <div class="left-entry">
        <div class="result-selectLeft" @click="tabsIndex = 0">
          <img
            src="../assets/item1-act.png"
            alt=""
            class="acitive-now"
            :style="{ display: tabsIndex === 0 ? 'block' : 'none' }"
          />
          <img
            src="../assets/item1.png"
            :style="{ display: tabsIndex === 0 ? 'none' : 'block' }"
          />
          <div>
            <p>优质成果</p>
            <span>HIGH-QUALITY RESULTS</span>
          </div>
        </div>
        <div class="need-select-left" @click="tabsIndex = 1">
          <img
            src="../assets/item2-act.png"
            alt=""
            class="acitive-now"
            :style="{ display: tabsIndex === 1 ? 'block' : 'none' }"
          />
          <img
            src="../assets/item2.png"
            alt=""
            :style="{ display: tabsIndex === 1 ? 'none' : 'block' }"
          />
          <div>
            <p>项目需求</p>
            <span>PROJECT REQUIREMENTS</span>
          </div>
        </div>
        <div class="man-select-left" @click="tabsIndex = 2">
          <img
            src="../assets/item3-act.png"
            alt=""
            class="acitive-now"
            :style="{ display: tabsIndex === 2 ? 'block' : 'none' }"
          />
          <img
            src="../assets/item3.png"
            alt=""
            :style="{ display: tabsIndex === 2 ? 'none' : 'block' }"
          />
          <div>
            <p>科技专家</p>
            <span>TECHNOLOGY EXPERT</span>
          </div>
        </div>
      </div>
      <div class="middle-data container-wrap">
        <div class="steps-box">
          <div class="content-steps">
            <ul id="animation" v-show="tabsIndex === 0">
              <li
                @click="changeresult(i.id)"
                v-for="(i, index) in achlist.slice(0, 10)"
              >
                <img
                  src="../assets/首页/即时工具.png"
                  alt=""
                  class="round"
                />
                <div class="list-item-content">
                  <p class="list-title">{{ i.achName }}</p>
                  <span class="time">"{{ i.createTime }}"</span>
                </div>
                <img
                  src="../assets/首页/即时工具hot.png"
                  alt=""
                  class="hot"
                  style="display: none"
                />
              </li>
            </ul>
            <ul id="animation" v-show="tabsIndex === 1">
              <li
                @click="changerequire(i.id)"
                v-for="(i, index) in requirelist"
              >
                <img
                  src="../assets/首页/即时工具.png"
                  alt=""
                  class="round"
                />
                <div class="list-item-content">
                  <p class="list-title">{{ i.demName }}</p>
                  <span class="time">"{{ i.createTime }}"</span>
                </div>
                <img
                  src="../assets/首页/即时工具hot.png"
                  alt=""
                  class="hot"
                  style="display: none"
                />
              </li>
            </ul>
            <div class="people-selection" v-show="tabsIndex === 2">
              <el-row>
                <el-col
                  :span="7"
                  @click="changeitem(item)"
                  v-show="item.state != '待审核'"
                  v-for="(item, index) in typelist"
                >
                  <a style="cursor: pointer">
                    <el-icon><CaretRight /></el-icon>
                    {{ item }}
                  </a>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
      <div class="entry">
        <div class="result-select">
          <span>优质成果征集</span>
          <br />
          <el-button> 点击进入 </el-button>
        </div>
        <div class="need-select">
          <span>项目需求征集</span>
          <br />
          <el-button> 点击进入 </el-button>
        </div>
        <div class="man-select">
          <span>科技专家征集</span>
          <br />
          <el-button> 点击进入 </el-button>
        </div>
      </div>
    </div>
    <!-- <div class="interview container-wrap">
      <div class="dockingo">
        <span id="LoginNum">{{ parseInt(fournum[0]?.value) }}</span
        >项
        <h2>成果登记数</h2>
      </div>
      <div class="dockingw">
        <span id="LoginNum">{{ parseInt(fournum[1]?.value) }}</span
        >位
        <h2>人才入驻数</h2>
      </div>
      <div class="dockingt">
        
        <span id="ActionmentNum">34</span
        >个
        <h2>转化成果数</h2>
      </div>
      <div class="dockingf">
        
        <span id="DemondNum">3124</span
        >万元
        <h2>成果转化额</h2>
      </div>
    </div> -->

    <div class="container-wrap ranking-box" v-show="sectionTabIndex === 1">
      <!-- <div class="ranking-needs">
        <p>项目需求排行榜</p>
        <ul>
          <li
            class="ranking-item"
            :class="{ isDark: index % 2 === 1 }"
            @click="changerequire(i.id)"
            v-for="(i, index) in requirelist"
          >
            <span class="sorts isSpecials">{{ index + 1 }}</span
            ><span class="title">{{ i.demName }}</span
            ><span class="time">{{ i.createTime }}</span>
          </li>
        </ul>
      </div> -->
      <div class="ranking-result">
        <p>技术成果排行榜</p>
        <div class="ranking-list-container">
          <ul class="ranking-list-left">
            <li
              class="ranking-item"
              :class="{ isDark: index % 2 === 1 }"
              @click="changeresult(i.id)"
              v-for="(i, index) in achlist.slice(0, 5)"
            >
              <span class="sorts isSpecial">{{ index + 1 }}</span
              ><span class="title">{{ i.achName }}</span
              ><span class="time">{{ i.createTime }}</span>
            </li>
          </ul>
          <ul class="ranking-list-right">
            <li
              class="ranking-item"
              :class="{ isDark: index % 2 === 1 }"
              @click="changeresult(i.id)"
              v-for="(i, index) in achlist.slice(5, 10)"
            >
              <span class="sorts isSpecial">{{ index + 6 }}</span
              ><span class="title">{{ i.achName }}</span
              ><span class="time">{{ i.createTime }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, nextTick, onUnmounted, computed } from "vue";
import { useRouter } from "vue-router";
import { Picture as IconPicture, CaretRight } from "@element-plus/icons-vue";
import bus from "@/utils/bus";

import china from "@/china.json";
import * as echarts from "echarts";
import {
  getswiper,
  getach,
  getdem,
  getteacher,
  getnotice,
  getadvice,
  getnews,
  getstatistics,
} from "@/api/user/index";
const router = useRouter();

// 缩放相关
const baseWidth = 1920; // 基准宽度，基于设计稿宽度
const minScale = 0.4; // 最小缩放比例，防止过度缩小
const maxScale = 1.2; // 最大缩放比例，防止过度放大
const scale = ref(1);

// 计算缩放比例
const calculateScale = () => {
  const windowWidth = window.innerWidth;
  // 根据窗口宽度计算缩放比例，窗口越大，缩放比例越大
  const calculatedScale = windowWidth / baseWidth;
  // 限制在最小和最大缩放比例之间
  scale.value = Math.max(minScale, Math.min(calculatedScale, maxScale));
};

// 缩放样式
const scaleStyle = computed(() => {
  const style = {
    // 使用 zoom 属性，会缩放所有内容包括背景、文字、图片等
    zoom: scale.value,
    // 同时使用 transform 作为备用方案
    transform: `scale(${scale.value})`,
    transformOrigin: 'top center',
    width: `${baseWidth}px`,
    margin: '0 auto',
    display: 'block',
    transition: 'transform 0.3s ease, zoom 0.3s ease',
  };
  
  return style;
});

// 监听窗口大小变化
let resizeTimer = null;
const handleResize = () => {
  if (resizeTimer) {
    clearTimeout(resizeTimer);
  }
  resizeTimer = setTimeout(() => {
    calculateScale();
    // 调试：输出缩放信息
    console.log('缩放比例:', scale.value, '窗口宽度:', window.innerWidth);
  }, 100);
};

// 格式化日期，去掉时分秒
const formatDate = (dateStr) => {
  if (!dateStr) return "";
  // 如果包含空格，取空格前的部分（日期部分）
  return dateStr.split(" ")[0];
};

const togg = (item) => {
  // 如果是链接类型，直接打开链接
  if (item.type === '链接类型' && item.link) {
    window.open(item.link, '_blank');
    return;
  }
  // 否则跳转到详情页，工作动态的index固定为1
  router.push({
    path: "/noticedetail",
    query: {
      id: item.id,
      index: 1,
    },
  });
};
const typelist = [
  "全部",
  "现代农业",
  "粮食经济作物",
  "森林资源",
  "动物生产",
  "动物医学",
  "生态环境",
  "农机装备类",
  "食品产业技术",
  "化学与化学工程技术",
  "新一代信息技术",
  "生物医药",
  "新型材料",
];

const zxc =
  "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg";
const tablist = ["工作动态"];

//获取四个数字
const fournum = ref([]);
const getfournum = async () => {
  await getstatistics({}).then((res) => {
    fournum.value = res.data;
  });
};
getfournum();

const randerlist = ref([]);
//获取新闻动态
const advicelist = ref([]);
const getadvicelist = async () => {
  const res = await getnews(1, 7);
  advicelist.value = res.data.records;
  randerlist.value = advicelist.value;
};
getadvicelist();
//获取通知公告
const noticelist = ref([]);
const getnoticelist = async () => {
  const res = await getnotice(1, 7);
  noticelist.value = res.data.records;
};
getnoticelist();

//获取轮播图
const swiperlist = ref([]);
const getswiperlist = async () => {
  await getswiper().then((res) => {
    swiperlist.value = res.data;
  });
};
getswiperlist();
//获取成果列表
const achlist = ref([]);
const getachlist = async () => {
  await getach().then((res) => {
    res.data.records.map((item) => {
      if (item.achImage) {
        return (item.achImage = JSON.parse(item.achImage));
      }
    });
    achlist.value = res.data.records;
  });
};
getachlist();

//获取需求列表
const requirelist = ref([]);
const getrequirelist = async () => {
  await getdem().then((res) => {
    res.data.records.map((item) => {
      if (item.demImage) {
        return (item.demImage = JSON.parse(item.demImage));
      }
    });
    requirelist.value = res.data.records;
  });
};
getrequirelist();

//获取科技专家列表
const peoplelist = ref([]);
const getpeoplelist = async () => {
  await getteacher(1, 6).then((res) => {
    peoplelist.value = res.data.records;
  });
};
getpeoplelist();

let dataList = ref([]);
const mapEcharts = () => {
  let initMap = echarts.init(document.querySelector("#mapDom"));
  echarts.registerMap("china", china);
  let options = {
    title: {
      text: "",
      sublink:
        "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (成果量)",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
    },
    // visualMap: {
    //   min: 0,
    //   max: 1000,
    //   text: ['High', 'Low'],
    //   realtime: false,
    //   calculable: true,
    //   inRange: {
    //     color: ['lightskyblue', 'yellow', 'orangered']
    //   }
    // },
    series: [
      {
        name: "中国",
        type: "map",
        map: "china",
        label: {
          show: false,
        },
        data: dataList.value,
      },
    ],
  };
  initMap.setOption(options);
  document.querySelector("#mapDom").setAttribute("_echarts_instance_", "");
};

onMounted(() => {
  // 初始化缩放比例
  calculateScale();
  // 监听窗口大小变化
  window.addEventListener('resize', handleResize);
  
  bus.on("getmap", (msg) => {
    if (msg == "/home") {
      router.go(0);
    }
    console.log(msg);
  });
  dataList.value = [
    { name: "北京市", value: 290 },
    { name: "天津市", value: 320 },
    { name: "河北省", value: 240 },
    { name: "山西省", value: 520 },
    { name: "内蒙古自治区", value: 120 },
    { name: "辽宁省", value: 210 },
    { name: "吉林省", value: 620 },
    { name: "黑龙江省", value: 20 },
    { name: "上海市", value: 220 },
    { name: "江苏省", value: 820 },
    { name: "浙江省", value: 320 },
    { name: "安徽省", value: 520 },
    { name: "福建省", value: 120 },
    { name: "江西省", value: 620 },
    { name: "山东省", value: 920 },
    { name: "河南省", value: 220 },
    { name: "湖北省", value: 720 },
    { name: "湖南省", value: 210 },
    { name: "广东省", value: 20 },
    { name: "广西壮族自治区", value: 20 },
    { name: "海南省", value: 240 },
    { name: "重庆市", value: 20 },
    { name: "四川省", value: 240 },
    { name: "贵州省", value: 420 },
    { name: "云南省", value: 320 },
    { name: "西藏自治区", value: 20 },
    { name: "陕西省", value: 240 },
    { name: "甘肃省", value: 920 },
    { name: "青海省", value: 720 },
    { name: "宁夏回族自治区", value: 120 },
    { name: "新疆维吾尔自治区", value: 420 },
    { name: "台湾省", value: 230 },
    { name: "香港特别行政区", value: 420 },
    { name: "澳门特别行政区", value: 210 },
  ];
  nextTick(() => {
    // mapEcharts();
  });
});

onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('resize', handleResize);
  if (resizeTimer) {
    clearTimeout(resizeTimer);
  }
});
const itemcurrent = ref(0);
const changeitem = (item) => {
  itemcurrent.value = item;
  router.push({
    path: "/product/spu",
    query: {
      field: item,
    },
  });
};
const requirecurrent = ref(0);

const changerequire = (index) => {
  requirecurrent.value = index;
  router.push({
    path: "/product/requiredetail",
    query: {
      id: index,
    },
  });
};
const changegg = (index) => {
  current.value = index;
  // 现在只有一个 tab（新闻动态），直接显示新闻动态数据
  randerlist.value = advicelist.value;
  console.log(randerlist.value);
};
const changeresult = (index) => {
  resultcurrent.value = index;
  router.push({
    path: "/acl/achievementdetail",
    query: {
      id: index,
    },
  });
};
const toresult = (index) => {
  resultcurrent.value = index;
  router.push({
    path: "/acl/achievementdetail",
    query: {
      id: index,
    },
  });
};

const resultcurrent = ref(0);
let current = ref(0);
const tabsIndex = ref(0);
const sectionTabIndex = ref(0); // 控制数据中心和热门排行的tab切换
</script>
<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}
@keyframes mymove {
  to {
    transform: translateY(-30%);
  }
}
.nextbanner {
  padding: 20px 0px;
  background-color: rgb(232, 244, 251);

  .samewidthbox {
    width: 1400px;
    box-sizing: border-box;
    margin: 0px auto;
  }

  .nextbanner_item {
    @include flex();

    img {
      width: 60px;
      height: 50px;
    }

    .nextbanner_item_right {
      display: flex;
      flex-direction: column;

      .num {
        font-size: 20px;
        color: #2477ca;
        padding-right: 10px;
      }

      .nextbanner_item_right_bottom {
        font-size: 18px;
      }
    }
  }

  .shu {
    width: 2px;
    height: 70px;
    background-color: #999;
  }
}

.samebox {
  box-sizing: border-box;
  margin: 0px auto;
  width: 1400px;

  .samebox_title {
    @include flex();

    img {
      width: 30px;
      margin-right: 10px;
    }

    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }

  // 新闻资讯
  .newsbox {
    @include flex();
    // width: 1400px;
    justify-content: space-between;

    padding-top: 44px;
    .newsbox_left {
      width: 920px;
      height: 460px;

      .newsbox_left_item {
        height: 460px;
      }
      :deep(.el-carousel__container) {
        height: 460px;
      }
    }

    .newsbox_right {
      width: 460px;
      height: 453px;
      display: flex;
      flex-direction: column;
      .newsbox_right_left {
        @include flex();
        box-sizing: border-box;
        font-size: 18px;

        .newsbox_right_left_item {
          padding: 10px;
          letter-spacing: 2px;
          text-align: center;
          height: 46px;
          width: 100%;
          background: #e0ebf5;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333;
          display: inline-block;
          cursor: pointer;
          opacity: 1;
          border-left: 1px solid #fff;
          position: relative;
          &:after {
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: -8px;
            content: "";
            width: 9px;
            height: 7px;
            box-sizing: border-box;
            border-top: 9px solid #0561d2;
            border-left: 7px solid transparent;
            pointer-events: none;
            border-right: 7px solid transparent;
          }
        }
        .active {
          background: #0561d2;
          color: #fff;
          &:after {
            display: block;
          }
        }
      }

      .newsbox_right_center {
        height: 200px;
        flex: 1;
        box-sizing: border-box;

        .newsbox_right_center_lsit {
          position: relative;
          // @include flex();
          width: 100%;
          .header-new {
            height: 110px;
            background: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            .left-time {
              width: 110px;
              height: 110px;
              text-align: center;
              background: #dbebfc;
              strong {
                font-size: 32px;
                font-family: PingFang SC;
                font-weight: 600;
                line-height: 24px;
                color: #0568be;
                margin: 20px 0 15px;
                display: inline-block;
              }
              span {
                color: #686f88;
              }
            }
            .right-title {
              box-sizing: border-box;
              padding: 20px;
              text-align: left;
              // width: 440px;
              p {
                font-size: 20px;
                font-family: PingFang SC;
                font-weight: 500;
                line-height: 26px;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 8px;
                white-space: pre-line;
              }
              span {
                font-size: 15px;
                font-family: PingFangSC-Regular;
                color: #999;
                overflow: hidden;
                display: inline-block;
                height: 48px;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
          .point {
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #aaa;
            border-radius: 50%;
            opacity: 1;
          }
          .new-title {
            width: 330px;
            margin-right: 30px;
            font-size: 18px;
            font-family: PingFangSC-Regular;
            line-height: 28px;
            color: #333;
            opacity: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            margin-left: 4px;
          }
          .newTime {
            font-size: 14px;
            color: #999;
            margin-left: auto;
            text-align: right;
          }
          .newsItem {
            margin-top: 11px;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            line-height: 24px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: left;
          }
        }
      }

      .newsbox_right_right {
        height: 32px;
        background: #e3edf7;
        opacity: 1;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        line-height: 32px;
        color: #686f88;
        text-align: center;
        margin-top: 20px;
        cursor: pointer;
      }
    }
  }
}
.top-content {
  background: url(../assets/bg.png) no-repeat;
  background-size: 100% auto;
  position: relative;
  box-sizing: border-box;
  /* 确保缩放时所有子元素都跟随缩放 */
  /* transform: scale() 会自动应用到所有子元素 */
}
.container-wrap {
  width: 1400px;
  
  margin: 0 auto;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dataCenter {
  .left-entry {
    div {
      width: 260px;
      height: 136px;
      cursor: pointer;
      position: relative;
      div {
        color: #fff;
        text-align: left;
        padding: 40px 0 0 27px;
      }
      p {
        font-weight: 700;
        font-size: 26px;
        font-family: Microsoft YaHei;
      }
      span {
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
      }
      img {
        width: 260px;
        height: auto;
        position: absolute;
        left: 0;
        z-index: 0;
        top: 0;
      }
      .acitive-now {
        width: 275px !important;
        max-width: 275px !important;
      }
    }
  }
  .man-select-left,
  .need-select-left {
    margin-top: 11px;
  }
  .middle-data {
    justify-content: center;
    align-items: flex-start;
    .DataNum {
      width: 187px;
      height: 430px;
      background: #dbeeff;
      position: relative;
      img {
        width: 80px;
        margin-top: 47px;
      }
      p {
        font-size: 48px;
        font-family: DIN-Medium;
        line-height: 1;
        color: #0561d2;
      }
      div {
        background: url();
        width: 90px;
        height: 29px;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-size: contain;
        font-size: 22px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 29px;
        background-position: 50%;
        color: #0561d2;
        margin: 20px auto 70px;
      }
      button {
        min-width: 100px;
        height: 32px;
        border: 1px solid #0561d2;
        opacity: 1;
        border-radius: 0;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 16px;
        color: #0561d2;
        background: transparent;
        margin: 6px 0;
      }
      &:after {
        clear: both;
        position: absolute;
        background: transparent;
        left: 0;
        bottom: 55px;
        content: "";
        width: 0;
        height: 0;
        border-left: 17px solid #fff;
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
      }
    }
    .isChosed {
      cursor: pointer;
    }
    .isChosed1 {
      cursor: pointer;
      background: #0561d2 !important;
      opacity: 1;
      border-radius: 0 !important;
      color: #fff !important;
    }
    .top-active:after {
      bottom: 0;
      top: 55px;
    }
    .middle-active:after {
      bottom: 0;
      top: 202px;
    }
    .steps-box {
      padding: 32px 39px 0 39px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid #ececec;
      width: 850px;
      background: #fff;
      height: 430px;
      margin-top: 20px;
    }
    .content-steps {
      overflow: hidden;
      height: 360px;
      ul {
        animation: mymove 30s linear 0s infinite normal none running;
        -moz-animation: 30s linear 0s infinite normal none running mymove;
        -webkit-animation: mymove 30s linear 0s infinite normal none running;
        -o-animation: 30s linear 0s infinite normal none running mymove;
      }
      li {
        position: relative;
        height: 64px;
        text-align: left;
        border-left: 1px dashed #e1e1e1;
        cursor: pointer;
        margin-left: 20px;
        display: flex;
        align-items: center;
      }
      .list-item-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 26px;
        margin-right: 15px;
        min-width: 0; // 允许flex子项收缩
      }
      .list-title {
        text-align: left;
        line-height: 1;
        font-size: 20px;
        color: #333;
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0;
        margin-right: 15px;
        min-width: 0; // 允许文本溢出
      }
      p {
        text-align: left;
        line-height: 1;
        margin-left: 26px;
        font-size: 16px;
        color: #333;
        display: inline-block;
        width: 25rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 2px;
      }
      .round {
        position: absolute;
        left: -7px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        flex-shrink: 0;
      }
      .hot {
        width: 31px;
        margin-left: 15px;
        flex-shrink: 0;
      }
      .time {
        font-size: 16px;
        font-family: MicrosoftYaHei;
        color: #797b80;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: auto;
      }
    }
  }
}

.people-selection {
  height: 100%;
  .el-col {
    height: 90px;
    text-align: center;
    text-align: left;
    a {
      color: #16418a;
      text-decoration: none;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      font-size: 16px;
    }
  }
}

.entry {
  div {
    width: 245px;
    height: 134px;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #2769dc;
    opacity: 1;
    text-align: left;
    padding: 37px 0 0 110px;
    box-sizing: border-box;
  }
  .el-button {
    background: transparent;
    font-size: 14px;
    padding: 7px 10px;
    border: 1px solid #a1bed8;
    margin-top: 10px;
  }
  .el-button {
    color: #7d9ed8;
    border: 1px solid #7d9ed8;
  }
  .el-button:hover {
    color: #2769dc;
    border: 1px solid #2769dc;
  }
}

.result-select {
  background: url(../assets/item1-bg.png);
  background-size: 100% 100%;
}

.need-select {
  background: url(../assets/item2-bg.png);
  background-size: 100% 100%;
  margin-top: 11px;
  color: #f8870b !important;
  .el-button {
    span {
      color: #f2a348 !important;
    }
  }
  .el-button {
    color: #f2a348;
    border: 1px solid #fbc68a;
  }
  .el-button:hover {
    color: #f8870b;
    border: 1px solid #f8870b;
  }
}

.man-select {
  background: url(../assets/item3-bg.png);
  background-size: 100% 100%;
  margin-top: 11px;
  color: #16c4b2 !important;
  .el-button {
    color: #42d2c3;
    border: 1px solid #a1d8d2;
  }
  .el-button:hover {
    color: #16c4b2;
    border: 1px solid #16c4b2;
  }
}

.interview {
  background: url(../assets/interview-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 20px auto 0;
  height: 190px;
  color: #fff;
  & > div {
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    width: 25%;
    height: 100%;
    padding-left: 61px;
    position: relative;
    font-size: 20px;
    & > h2 {
      font-size: 18px;
    }
    & > span {
      font-size: 60px;
      display: inline-block;
      margin-top: 49px;
      font-weight: 700;
      margin-right: 5px;
    }
  }
  & > div:before {
    position: absolute;
    top: 60px;
    left: -18px;
    clear: both;
    content: "";
    width: 1px;
    height: 88px;
    background: rgba(245, 242, 242, 0.2);
  }
}

.new-entry > img {
  width: 690px;
  cursor: pointer;
}
.section-tab-container {
  width: 1400px;
  margin: 40px auto 30px;
  
  .section-tab {
    display: flex;
    gap: 30px;
    border-bottom: 2px solid #e4e4e4;
    // margin-bottom: 30px;
    
    .tab-item {
      cursor: pointer;
      padding-bottom: 20px;
      transition: all 0.3s;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      
      h3 {
        font-size: 28px;
        font-weight: 600;
        color: #666;
        margin: 0;
        margin-bottom: 5px;
      }
      
      .sub-title {
        font-size: 14px;
        color: #999;
        display: block;
      }
      
      &.active {
        border-bottom-color: #0561d2;
        
        h3 {
          color: #0561d2;
        }
        
        .sub-title {
          color: #0561d2;
        }
      }
      
      &:hover {
        h3 {
          color: #0561d2;
        }
        
        .sub-title {
          color: #0561d2;
        }
      }
    }
  }
}

.global-title {
  width: 1400px;
  margin: 40px auto 30px;
  border-bottom: 1px solid #e4e4e4;
  color: #999;
  font-size: 18px;
  position: relative;
  text-align: left;
  & > img {
    width: 128px;
    height: 128px;
    display: inline-block;
    vertical-align: middle;
  }
  & > div {
    height: 60px;
    display: inline-block;
    & > h3 {
      font-size: 28px;
      font-weight: 600;
      display: inline;
      color: #333;
      display: inline-block;
      position: relative;
      vertical-align: middle;
    }
    & > span {
      display: inline-block;
      vertical-align: middle;
      margin: 0 10px;
    }
    & > span:after {
      clear: both;
      position: absolute;
      width: 116px;
      height: 6px;
      background: #0561d2;
      left: 0;
      right: 0;
      bottom: -4px;
      content: "";
    }
  }
}

.ranking-box {
  height: 550px;
  align-items: flex-start;
  overflow: hidden;
  margin-bottom: 20px;
  div {
    width: 100%;
    height: 106px;
    line-height: 106px;
    font-size: 44px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #fff;
    opacity: 1;
    text-align: left;
    box-sizing: border-box;
    p {
      // margin-left: 106px;
      text-align: center;
      font-family: PMZD;
    }
  }
}

.ranking-needs {
  background: url(../assets/rangking-item1-bg.png);
  background-size: 100% 100%;
}

.ranking-result {
  width: 100%;
  height: 100%;
  background: url(../assets/rangking-item2-bg.png);
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  
  p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    font-family: PMZD;
    font-size: 44px;
    font-weight: 400;
    color: #fff;
    line-height: 66px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
  }
  
  .ranking-list-container {
    display: flex;
    padding: 0 40px 20px 40px;
    gap: 40px;
    box-sizing: border-box;
  }
  
  .ranking-list-left,
  .ranking-list-right {
    flex: 1;
    padding: 0;
    margin: 0;
    list-style: none;
  }
}

.isDark {
  background: #f5f5f5;
}

.isSpecial {
  background: rgba(245, 143, 70, 0.07);
  color: #f58f46;
}

.isSpecial,
.isSpecials {
  display: inline-block;
  width: 41px;
  height: 41px;
  text-align: center;
  line-height: 41px;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: 600;
  margin-left: 16px !important;
}

.isSpecials {
  background: rgba(16, 194, 176, 0.07);
  color: #10c2b0;
}

.ranking-item {
  width: 100%;
  height: 60px;
  align-items: center;
  opacity: 1;
  border-radius: 20px;
  color: #333;
  font-size: 18px;
  display: flex;
  line-height: 60px;
  justify-content: space-between;
  cursor: pointer;
  font-family: PingFangSC-Regular;
  margin-bottom: 10px;
  .sorts {
    margin-left: 20px;
    font-size: 14px;
  }
  .title {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 10px;
  }
  .time {
    margin-right: 20px;
    color: #999;
    white-space: nowrap;
  }
}
</style>
